<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>静态数据树</title>
	<script type="text/javascript">
		var Global = {
			contextPath:'/bingo.ui.framework'
		} 
	</script>
	<script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	<script src="../../../../scripts/jquery.utils.js" type="text/javascript"></script>
	
	<link  href="../../../../themes/default/ui.css" type="text/css" id="themesLink" rel="stylesheet" />
	
	<script src="../ui.tree.js" type="text/javascript"></script>
	<link  href="../ui.tree.css" rel="stylesheet" type="text/css" />
	
	<link href="../../contextmenu/contextmenu.css" rel="stylesheet" type="text/css" />
	<script src="../../contextmenu/jquery.contextmenu.js" type="text/javascript"></script> 

	<link type="text/css" href="../../../demos.css" rel="stylesheet" />
	<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	<style>
		.tree{
			width:200px;
			height:240px;
		}
	</style>
	
	<script>
		$(function(){
			var json_data = {//静态数据
				id:'11',
				text:'根节点',
				isExpand:true,
				childNodes:[
					{
						id:'21',
						text:'数据源表11',
						childNodes:[
							{
								id:'youda1',
								text:'有道1'
							}
						]
					},
					{
						id:'31',
						text:'数据源表二1'
					}
				]
			 } ;


			function menuAddAction(){
				if( !confirm('确认添加子节点吗?') )return ;
				var id = this.data.id ;
				$('#default-tree').tree().addNode( {id:id+'01',text:'动态添加',parentId:id}) ;
			}

			function menuUpdateAction(){
				if( !confirm('确认更新该节点吗?') )return ;
				var id = this.data.id ;
				$('#default-tree').tree().updateNode( {id:id,text:'已经修改'}) ;	
			}

			function menuDeleteAction(){
				if( !confirm('确认删除该节点吗?') )return ;
				var id = this.data.id ;
				$('#default-tree').tree().deleteNode( id ) ;	
			}

			$('#default-tree').tree({//tree为容器ID
				dataSourceMode:'data',
				data:json_data,
				contextMenu:function( record ){
					//record为树查询获取的行对象，可以根据行对象返回对应的右键菜单项
					return { 
							width: 100, 
							items: [
	                               { text: "新增", icon: "../../../../themes/common/images/icons/add.gif",id: record.id, action: menuAddAction},
	                               { text: "修改", icon: "../../../../themes/common/images/icons/edit.png",id: record.id, action: menuUpdateAction },
	                               { type: "splitLine" },
	                               { text: "删除", icon: "../../../../themes/common/images/icons/delete.gif",id: record.id, action: menuDeleteAction }
	                        ]
	                  } ;
				}
            }) ;
			
		})
	</script>
	
</head>

<body>
	<div id='content-default' class='demo'>
			<h1></h1>
			<div id="default-tree" class="tree" style="padding: 5px; overflow-y: auto; height:300px;"></div>
	</div>
</body>
</html>